<template>
  <section>
    <el-form label-width="80px" inline>
      <el-form-item label="地震年份">
        <el-input-number
          v-model="form.yearGt"
          controls-position="right"
          :min="0"
          :max="9999"
        ></el-input-number>
        <span> ~ </span>
        <el-input-number
          v-model="form.yearLt"
          controls-position="right"
          :min="0"
          :max="9999"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="地震月份">
        <el-input-number
          v-model="form.monthGt"
          controls-position="right"
          :min="1"
          :max="12"
        ></el-input-number>
        <span> ~ </span>
        <el-input-number
          v-model="form.monthLt"
          controls-position="right"
          :min="1"
          :max="12"
        ></el-input-number>
      </el-form-item>
      <br/>
      <el-form-item label="地震震级">
        <el-input-number
          v-model="form.magnitudeGt"
          controls-position="right"
          :min="0"
          :max="10"
          :step="0.1"
        ></el-input-number>
        <span> ~ </span>
        <el-input-number
          v-model="form.magnitudeLt"
          controls-position="right"
          :min="0"
          :max="10"
          :step="0.1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="震源深度">
        <el-input-number
          v-model="form.depthGt"
          controls-position="right"
          :min="0"
          :max="10"
          :step="0.1"
        ></el-input-number>
        <span> ~ </span>
        <el-input-number
          v-model="form.depthLt"
          controls-position="right"
          :min="0"
          :max="10"
          :step="0.1"
        ></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="width: 100%; height: 750px" ref="map"></div>
  </section>
</template>

  <script>
import * as echarts from "echarts/core";
import { ScatterChart } from "echarts/charts";
import { GeoComponent } from "echarts/components";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import worldMap from "./world.json";
import { getGeoData } from "@/api/geo/geo";
export default {
  data() {
    return {
      form: {
        yearGt: null,
        yearLt: null,
        monthGt: null,
        monthLt: null,
        magnitudeGt: null,
        magnitudeLt: null,
        depthGt: null,
        depthLt: null,
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      let params = {...this.form};
      this.removeZeroProps(params)
      getGeoData(params).then((res) => {
        let data = res.data;
        this.initChart(data);
      });
    },
    removeZeroProps(obj) {
      for (let prop in obj) {
        if (obj[prop] === 0) {
          delete obj[prop];
        }
      }
      return obj;
    },
    reset(){
      this.form = {};
      this.getData();
    },
    initChart(data) {
      console.log(
        data.map((o) => ({
          name: o.magnitude,
          value: [parseFloat(o.longitude), parseFloat(o.latitude)],
        }))
      );

      echarts.registerMap("world", { geoJSON: worldMap });
      // 注册必须的组件
      echarts.use([
        TitleComponent,
        TooltipComponent,
        LegendComponent,
        GeoComponent,
        ScatterChart,
        CanvasRenderer,
      ]);

      const myChart = echarts.init(this.$refs.map);

      // 指定图表的配置项和数据
      const option = {
        backgroundColor: "#404a59",
        title: {
          text: "世界地图",
          subtext: "",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
          orient: "vertical",
          top: "bottom",
          left: "right",
          data: ["地点"],
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: "world",
          roam: true,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#323c48",
              borderColor: "#111",
            },
            emphasis: {
              areaColor: "#2a333d",
            },
          },
        },
        series: [
          {
            name: "地点",
            type: "scatter",
            coordinateSystem: "geo",
            data: data.map((o) => ({
              name: o.magnitude,
              value: [parseFloat(o.longitude), parseFloat(o.latitude)],
            })),
            symbolSize: 10,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#ddb926",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

  <style>
</style>
